<template>
	<div>
		<div>
			文章名称：<el-input class="titleInput" size="small" v-model="publishArticle.title" placeholder="请输入文章标题"></el-input>
			文章类别：<el-select size="small" v-model="publishArticle.cid" placegolder="请选择文章类别">
				<el-option v-for="item in categories" :key="item.id" :lable="item.id" :value="item.cname">
				</el-option>
			</el-select>
		</div>
		<div class="main">
			<mavon-editor @change="markdownChange" style="height: 500px;" v-model='articleContent' />
		</div>
		<div class="btnGroup">
			<el-button type="default">保存草稿</el-button>
			<el-button type="primary">文章发布</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "PublishArticle",
		data: function() {
			return {
				publishArticle: {
					title: '',
					cid: '',
					mdContent:'',
					htmlContent:''
				},
				categories: [],
				articleContent:''
			}
		},
		methods:{
			markdownChange(value,render){
				this.publishArticle.mdContent = value;
				this.publishArticle.htmlContent = render;
			},
			initCategories(){
				this.$getRequest('/category/list')
				.then(resp=>{
					if(resp){
						this.categories = resp.data.data;
					}
				})
			}
		},
		mounted() {
			this.initCategories();
		}
	}
</script>

<style>
	.titleInput{
		width: 350px;
		margin-right: 10px;
	}
	.main{
		margin: 10px 0;
	}
	.btnGroup{
		display: flex;
		justify-content: flex-end;
	}
</style>
